<template>
  <view class="acme-dialog" @touchmove.stop.prevent>
    <view class="overlay" @click="clickOverlay"
      :style="[showOverlay, { transition: duration + 's' }]"
    />
    <view
      class="panel"
      :style="[panelStyle, showPopup, {transform, transition: duration + 's'}]"
    >
      <view class="title" v-if="title" :style="{marginTop: !content ? '45rpx' : ''}">{{ title }}</view>
      <view class="content">{{ content }}</view>
      <view class="button-wrap" :class="{'button-wrap-round': buttonType === 'round'}">
        <view class="btn btn-cancel" @click="clickCancel" v-if="type === 'confirm'">
          {{ btnLeftText }}
        </view>
        <view class="line" v-if="type === 'confirm'"></view>
        <view class="btn btn-confirm" @click="clickConfirm">
          {{ btnRightText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 内容
    content: {
      type: String,
      default: "",
    },
    // 左侧按钮文字内容
    btnLeftText: {
      type: String,
      default: "取消",
    },
    // 右侧按钮文字内容
    btnRightText: {
      type: String,
      default: "确定",
    },
    // 类型（提示：tips | 确定：confirm）
    type: {
      type: String,
      default: "confirm",
    },
    // 按钮类型（默认：null｜圆角：'round'）
    buttonType: {
      type: String,
      default: null,
    },
    // 面板样式
    styles: Object,
    // 动画时长，单位秒
    duration: {
      type: Number,
      default: 0.3,
    },
    // 缩放系数
    scale: {
      type: Number,
      default: 1,
    },
    // 是否在点击遮罩层后关闭
    clickOverlayClose: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    panelStyle() {
      return Object.assign(
        {
          width: "82%",
          height: "280rpx",
          background: "#fff",
        },
        this.styles
      )
    },
  },
  watch: {
    value(show) {
      this.transform = `scale(0)`
      show ? this.openPopup() : this.closePopup()
    },
  },
  data() {
    return {
      showOverlay: {
        display: "none",
        backgroundColor: ""
      },
      showPopup: {
        opacity: 0,
        display: "none",
      },
      transform: "",
    }
  },
  methods: {
    // 打开弹窗
    openPopup() {
      this.showPopup = {}
      this.showOverlay = {}

      setTimeout(() => {
        this.transform = `scale(${this.scale})`
        this.showPopup = { display: "block" }
        this.showOverlay = { backgroundColor: "rgba(0, 0, 0, 0.65)" }
      }, 50)
      
      setTimeout(() => {
        this.transform = `scale(1)`
        this.opened()
      }, this.duration * 1000)
    },
    // 关闭弹窗
    closePopup() {
      this.showOverlay = { backgroundColor: "rgba(0, 0, 0, 0)" }
      this.showPopup = { opacity: 0 }

      setTimeout(() => {
        this.$set(this.showPopup, "display", "none")
        this.showOverlay = { display: "none" }
      }, this.duration * 800)
    },
    // 打开弹出层且动画结束后触发
    opened() {
      setTimeout(() => {
        this.$emit("opened")
      }, this.duration * 1000)
    },
    // 点击遮罩层时触发
    clickOverlay() {
      if (this.clickOverlayClose) {
        this.$emit("clickOverlay")
        this.$emit("input", false)
        this.close()
      }
    },
    // 点击取消按钮触发
    clickCancel() {
      this.$emit("clickCancel")
      this.$emit("input", false)
      this.close()
    },
    // 点击确认按钮触发
    clickConfirm() {
      this.$emit("clickConfirm")
      this.$emit("input", false)
      this.close()
    },
    // 关闭弹出层时触发
    close() {
      this.$emit("close")
      this.closed()
    },
    // 关闭弹出层且动画结束后触发
    closed() {
      setTimeout(() => {
        this.$emit("closed")
      }, this.duration * 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>